<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="../css/vant.index.css">
    <link rel="stylesheet" href="../css/iconfont.css">

    <link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/van_popup_morebtn.css">
    <link rel="stylesheet" href="../css/my_global_tabbar.css">
    <link rel="stylesheet" href="../css/blt_sideinformation_v_2_0.css">
    <link rel="stylesheet" href="../css/blt_row_box.css">
    <link rel="stylesheet" href="../css/blt_box.css">
    <link rel="stylesheet" href="../css/blt_notice_bar.css">
    <link rel="stylesheet" href="../css/blt_zx.css">
    <link rel="stylesheet" href="../css/blt_readingbox.css">
    <title>资讯</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            box-sizing: border-box;
            background: rgb(241, 241, 241);
            /*overflow: hidden;*/
            font-family: Open Sans, Helvetica Neue, Arial, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
            overflow: auto;
        }

        [v-cloak] {
            display: none;
        }
        /*vue组件的css  start*/

        .msglist {
            width: 100%;
            margin-top: 92px;
        }

        html,
        body {
            height: 100%
        }

        .swipper-box {
            width: 100%;
            margin: 0 auto;
            padding-top: 115px;
            padding-bottom: 5px;
            background-color: white;
        }

        .swipper-box img {
            width: 96%;
            height: 100%;
            margin-left: 2%;
            border-radius: 10px;
        }

        .blt_hot_box {
            margin: 5px 5px 0 5px;
            overflow: hidden;
        }

        .blt_hot_box .list {
            max-height: 255px;
            overflow: auto;
        }

        .blt_hot_box .list .item {
            margin-left: 15px;
            margin-right: 15px;
            /*padding-left: 15px;*/
            padding-bottom: 10px;
            border-bottom: 2px solid rgb(242, 243, 245);
        }

        .blt_hot_box .list .item p {
            padding-top: 15px;
            font-weight: bolder;
        }

        .blt_hot_box .list .item span {
            color: silver;
            font-size: 12px;
        }

        .globalItem_action {
            position: fixed;
            right: 20px;
            bottom: 5px;
            width: 50px;
            height: 120px;
            /*background-color: red;*/
            z-index: 3000;
        }

        .globalItem_action .globaAction_item {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #000;
            text-align: center;
            margin-bottom: 10px;
            opacity: 0.5;
        }

        .globalItem_action .globaAction_item span {
            display: block;
            line-height: 50px;
            /*margin: auto;*/
        }

        @media (min-width: 1540px) {
            /*.msglist {
                margin-top: 0px;
            }*/
            .globalItem_tabbar {
                background-color: rgba(0, 0, 0, 0);
                border-bottom: rgba(0, 0, 0, 0);
            }
            /*.msglist .van-notice-bar{
              position: fixed;
              bottom: 0;
            }*/
            .globalItem_action {
                position: fixed;
                right: 20px;
                bottom: 5px;
                width: 50px;
                height: 120px;
                /*background-color: red;*/
            }
            .globalItem_action .globaAction_item {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: #000;
                text-align: center;
                margin-bottom: 10px;
                opacity: 0.5;
            }
            .globalItem_action .globaAction_item span {
                display: block;
                line-height: 50px;
                /*margin: auto;*/
            }
            .sideInformation .info_panel {
                /*background-image: url('../images/1.png');
            background-size: cover;*/
            }
            .swipper-box {
                padding-left: 12%;
                padding-right: 12%;
            }
        }

        .loadMoreButton {
            width: 100%;
            padding-top: 30px;
            padding-bottom: 30px;
            text-align: center;
            font-size: 13px;
            color: #fff;
            /*background-color: red;*/
        }

        .footer_side {
            width: 100%;
            padding-bottom: 10px;
            text-align: center;
            font-size: 10px;
            color: #6c757d;
            /*background-color: red;*/
        }

        .loadMoreButton span {
            padding: 10px 40px;
            border-radius: 5px;
            background: #464646;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="globalItem_tabbar" id="globalItem_tabbar">
            <div class="head">
                <div class="global menuBtn"><span class="iconfont icon-gpszongheguanli" v-on:click="ShowSide"></span></div>
                <h3>GAMECORES</h3>
                <div class="global searchBtn"><span class="iconfont icon-liaotian"></span></div>
            </div>
            <div class="gnav">
                <div class="gnav_body">
                    <a href="../index.html">首页</a>
                    <a class="select">资讯</a>
                    <a>文章</a>
                    <a>动态</a>
                    <a>话题</a>
                    <a @click="goToPublish">发布</a>
                    <a href="./Shoppingindex.html">商城</a>
                </div>
            </div>
        </div>
        <!-- 返回到顶部 start-->
        <div class="globalItem_action">
            <div class="globaAction_item" v-on:click="goTotop">
                <span class="iconfont icon-genghuan"></span>
            </div>
            <div class="globaAction_item">
                <a href=""><span class="iconfont icon-backtop"></span></a>
            </div>
        </div>
        <!-- 返回到顶部 end-->
        <div id="swipper-box">
            <div class="swipper-box">
                <van-swipe style="height: 200px;" vertical>
                    <van-swipe-item>
                        <img src="https://image.gcores.com/6ac4fee0-a2d9-4b22-8cd3-048497c1b9f1.jpg" alt="">
                    </van-swipe-item>
                    <van-swipe-item>
                        <img src="https://image.gcores.com/2ed25615-7a72-4981-b644-216820fb7360.jpg" alt="">
                    </van-swipe-item>
                    <van-swipe-item>
                        <img src="https://image.gcores.com/7a014366-2b1a-42df-bb13-b81624dff199.jpg" alt="">
                    </van-swipe-item>
                </van-swipe>
            </div>
        </div>
        <div class="blt_hot_box">
            <van-panel title="本周最热">
                <div class="list">
                    <div class="item" v-for="(it,index) in HotMessageList" @click.stop="ReadingHot(index)" v-cloak>
                        <p>{{ it.first_title }}</p>
                        <span>{{it.InformationdetailsLike}} 喜欢 · {{it.InformationdetailsComment}} 评论</span>
                    </div>
                </div>
            </van-panel>
        </div>
        <div class="BLT_Box">
            <div class="title">资讯</div>
            <div class="Article" v-for="(it,index) in messageList" v-cloak>
                <div class="picture"><img :src="it.frontPicture" alt=""></div>
                <div class="details" @click.stop="ReadingNew(index)">
                    <div class="details_title">{{ it.first_title }}
                    </div>
                    <div class="details_author_time"><span class="author">{{ it.user_info }}</span><span class="details_time">{{ it.time }}</span></div>
                </div>
            </div>
        </div>
        <div class="loadMoreButton">
            <span @click="loadMore">{{moreBtnText}}</span>
        </div>
        <div class="footer_side">
            <span>All Rights Reserved &copy; 2019 BLT</span>
        </div>
        <van-popup v-model="ReadShow" round :style="{ width: '80%',height:'80%' }" @click-overlay="readOk">
            <div class="ReadWrap">
                <div class="pic"><img :src="readMsgBoxTmp.frontPicture" alt=""></div>
                <h1>{{ readMsgBoxTmp.first_title }}</h1>
                <p class="second_title">{{ readMsgBoxTmp.second_title }}</p>
                <div class="userInfo">
                    <img :src="readMsgBoxTmp.userPoint.blt_avatar" alt="">
                    <div class="ntpanel">
                        <div>
                            <span>{{ readMsgBoxTmp.userPoint.blt_name }}</span>
                            <span class="time">{{ readMsgBoxTmp.publishTime }}</span>
                        </div>
                        <div class="publish">
                            <span> 发布于</span>
                            <span class="type">{{ readMsgBoxTmp.Itag }}</span>
                        </div>
                    </div>
                </div>
                <span class="statement">本文系用户投稿，不代表本站观点</span>
                <p class="news">{{ readMsgBoxTmp.msgText }}</p>
                <div class="details">
                    <div class="detailitem _vote"><i class="iconfont icon-shou">{{ readMsgBoxTmp.ILike }}</i></div>
                    <div class="detailitem _mark"><i class="iconfont icon-jingpinhonver">{{ readMsgBoxTmp.IComment }}</i></div>
                </div>
            </div>
        </van-popup>
    </div>
</body>
<script type="text/javascript" src="../script/jquery2.0.0.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script src="../script/axios.min.js"></script>
<script src="../script/myscript.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script src="../script/vant.min.js"></script>
<script src="../script/local_db.js"></script>
<script type="text/javascript">
    Vue.prototype.ModalHelper = (function(bodyCls) { //跟index的功能一样
        var scrollTop
        return {
            afterOpen: function() {
                scrollTop = document.scrollingElement.scrollTop
                document.body.classList.add(bodyCls)
                document.body.style.top = -scrollTop + 'px'
            },
            beforeClose: function() {
                document.body.classList.remove(bodyCls)
                document.scrollingElement.scrollTop = scrollTop
            }
        }
    }('dialog-open'));
    var skip = 0;
    var limit = 1;
    var loadmore = true;
    var userInfo = $api.getStorage('userInfo');
    var app = new Vue({
        el: '#container',
        data: {
            moreBtnText: '查看更多',
            gnotice: '热烈庆祝白了头科技有限公司成立！',
            sideShow_lock_scroll: true,
            isShowNotice: true,
            messageList: [{
                "frontPicture": "",
                "userPoint": {
                    "blt_avatar": ""
                }
            }],
            HotMessageList: [{
                "frontPicture": "",
                "userPoint": {
                    "blt_avatar": ""
                }
            }],
            readMsgBoxTmp: {},
            show: false,
            sideShow: false,
            hover_index: 0,
            ReadShow: false
        },
        created()  {
            this.loadMore();
            this.loadHot();
            this.readMsgBoxTmp = this.HotMessageList[0];
        },
        methods: {
            ReadingNew: function(_index) {
                var _this = this;
                _this.ModalHelper.afterOpen();
                _this.readMsgBoxTmp = _this.messageList[_index];
                _this.ReadShow = true;
            },
            ReadingHot: function(_index) {
                var _this = this;
                _this.ModalHelper.afterOpen();
                _this.readMsgBoxTmp = _this.HotMessageList[_index];
                _this.ReadShow = true;
            },
            readOk: function() {
                var _this = this;
                _this.ModalHelper.beforeClose();
                _this.ReadShow = false;
            },
            NoShowNotice: function(_index) {
                this.isShowNotice = false;
            },
            ShowMoreBtn: function(_index) {
                this.show = true;
            },
            ShowSide: function(_index) {
                this.sideShow = true;
            },
            goTotop: function() {
                this.$toast({
                    message: '正在为您跳转到首页'
                });
                setTimeout(function() {
                    window.location.href = '../index.html';
                }, 1000);

            },
            enter: function(_index) {
                this.hover_index = _index;
            },
            leave: function(_index) {
                this.hover_index = 0;
            },
            goToPublish: function() {
                var url = './login.html';
                var message = '尚未登录。正在为您跳转登录页面!'
                if (userInfo != null) {
                    url = './publish.html';
                    message = '网络世界也需要文明，请遵守规则！'
                }
                this.$toast({
                    message: message,
                    position: 'bottom'
                });
                window.location.href = url;
            },
            loadHot: function() {
                var filter = {
                    order: "hot_count DESC",
                    limit: 2,
                    include: ['userPointPointer']
                }
                var now = Date.now();
                var _AppId = $blt.getAppId();
                var _appKey = $blt.getAppKey();
                var appKey = SHA1(_AppId, "UZ", _appKey, "UZ" + now) + "." + now;
                axios.get('https://d.apicloud.com//mcm/api/messages?filter=' + JSON.stringify(filter), {
                        headers: {
                            "X-APICloud-AppId": _AppId,
                            "X-APICloud-AppKey": appKey
                        }
                    })
                    .then(function(response) {
                        console.log(JSON.stringify(response));
                        if (response.data.length) {
                            app.HotMessageList = response.data;
                        } else {
                            console.log('查询条数有误，使用本地数据库\n');
                            app.HotMessageList = $lcdb.get();
                        }
                    })
                    .catch(function(error) {
                        console.log('查询出错，错误信息如下，使用本地数据库\n');
                        console.log(error);
                        app.HotMessageList = $lcdb.get();
                    });
            },
            loadMore: function() {
                var _this = this;
                if (loadmore) {
                    // _this.messageList = _this.messageList.concat($lcdb.get());
                    var filter = {
                        skip: skip,
                        limit: limit,
                        include: ['userPointPointer']
                    }
                    var now = Date.now();
                    var _AppId = $blt.getAppId();
                    var _appKey = $blt.getAppKey();
                    var appKey = SHA1(_AppId, "UZ", _appKey, "UZ" + now) + "." + now;
                    axios.get('https://d.apicloud.com//mcm/api/messages?filter=' + JSON.stringify(filter), {
                            headers: {
                                "X-APICloud-AppId": _AppId,
                                "X-APICloud-AppKey": appKey
                            }
                        })
                        .then(function(response) {
                            console.log(JSON.stringify(response));
                            if (response.data.length) {
                                if (response.data.length < limit) {
                                    _this.moreBtnText = '没有更多';
                                    loadmore = false;
                                }
                                if (skip == 0) {
                                    _this.messageList = response.data;
                                } else {
                                    _this.messageList = _this.messageList.concat(response.data);
                                }
                                skip += limit;
                            } else {
                                console.log('查询条数有误，使用本地数据库\n');
                                _this.messageList = $lcdb.get();

                            }
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                }
            }
        }
    });
    window.onload = function() {
        $('body,html').animate({
            scrollTop: 0
        }, );
    }
    $(window).resize(function() {
        var width = $(this).width();
    });
</script>

</html>
